<template>
  <common-echarts :option="option" ref="echarts"></common-echarts>
</template>

<script>
import CommonEcharts from "./echarts.vue";

export default {
  name: "PieEcharts",
  components: {
    CommonEcharts,
  },
  computed: {
    option() {
      let series = [
        {
          name: "销量",
          type: "pie",
          data: [
            { value: 35, name: "A商场" },
            { value: 325, name: "B商场" },
            { value: 335, name: "C商场" },
            { value: 345, name: "D商场" },
            { value: 355, name: "E商场" },
            { value: 365, name: "F商场" },
          ],
          radius: ["15%", "30%"], // 内部半径和外部半径的比例
        },
      ];

      return {
        title: {
          text: "各商场销售情况",
          subtext: "饼图",
          left: "center",
        },
        legend: {
          show: true,
          orient: "vertical", // 图例列表的布局朝向
          left: "left",
          // data中的数据类型必须要为string
          data: ["A商场", "B商场", "C商场", "D商场", "E商场", "F商场"],
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br />{b} : {c} ({d}%)",
          // {a}（系列名称），{b}（数据项名称），{c}（数值），{d}（百分比）
        },
        series: series,
      };
    },
  },
  data() {
    return {};
  },
  methods: {
    refresh() {
      console.log("option:", this.option);
      this.$nextTick(this.$refs.echarts.refresh);
    },
  },
};
</script>
